import React, { Component } from 'react';
import { Modal, Form, Input, InputNumber, Radio } from 'antd';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const { TextArea } = Input;

export default class FormDemo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value: 1
        };
    }

    onChange = (value) => {
        this.props.data.reduceAmount = value
    }

    render() {
        const formItemLayout = {
            labelCol: { span: 6 },
            wrapperCol: { span: 14 },
        }
        const { data } = this.props;
        return (
            <div>
                <Modal
                title="减免滞纳金"
                visible={this.props.visible}
                onOk={() => this.props.handleok(this.props.data)}
                onCancel={this.props.handleCancel}
                >
                    <Form>
                        <FormItem
                            label="姓名"
                            {...formItemLayout}
                        >
                            <div>{data.userTrueName}</div>
                        </FormItem>
                        <FormItem
                            label="手机号"
                            {...formItemLayout}
                        >
                            <div>{data.userPhone}</div>
                        </FormItem>
                        <FormItem
                            label="订单号"
                            {...formItemLayout}
                        >
                            <div>{data.orderNo}</div>
                        </FormItem>
                        <FormItem
                            label="借款金额(元)"
                            {...formItemLayout}
                        >
                            <div>{data.lendMoney}</div>
                        </FormItem>
                        <FormItem
                            label="滞纳金额(元)"
                            {...formItemLayout}
                        >
                            <div>{data.overdueMoney}</div>
                        </FormItem>
                        <FormItem
                            label="应还金额(元)"
                            {...formItemLayout}
                        >
                            <div>{data.payable}</div>
                        </FormItem>
                        <FormItem
                            label="已还金额(元)"
                            {...formItemLayout}
                        >
                            <div>{data.payMoney}</div>
                        </FormItem>
                        <FormItem
                            label="减免类型"
                            {...formItemLayout}
                        >
                            <RadioGroup value={this.state.value} >
                                <Radio value={1}>滞纳金额</Radio>
                            </RadioGroup>
                        </FormItem>
                        <FormItem
                            label="减免金额(元)"
                            {...formItemLayout}
                        >
                            <InputNumber min={0.00} step={0.01} defaultValue={data.reduceAmount} onChange={this.onChange} style={{width:'100%'}} />
                        </FormItem>
                        <FormItem
                            label="备注"
                            {...formItemLayout}
                        >
                            <TextArea value={data.remark} />
                        </FormItem>
                    </Form>
                </Modal>
            </div>
        );
    }
}
